<template>
  <div class="project-details-layout">
    <el-form :rules="rules" ref="formRef" size="mini" :model="formData" label-width="320px">
      <el-form-item label="项目代码：" prop='projectCode'>
        <el-input :disabled="editFlag" style="width: 60%" placeholder="请输入" v-model="formData.projectCode"></el-input>
      </el-form-item>
      <el-form-item label="项目名称：" prop='projectName'>
        <el-input :disabled="editFlag" style="width: 60%" placeholder="请输入" v-model="formData.projectName"></el-input>
      </el-form-item>
      <el-form-item label="申办方类型：" prop='sponsorType'>
        <el-radio-group :disabled="editFlag" v-model="formData.sponsorType">
          <el-radio :label=1>医院</el-radio>
          <el-radio :label=2>公司</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="申办方：" v-if="formData.sponsorType === 1" prop="hospitalName">
        <rolling-select @change="handleHospitalChange" :value="hospitalName" :width="520" :isDisabled="editFlag"/>
      </el-form-item>
      <el-form-item label="申办方：" v-if="formData.sponsorType === 2">
        <el-input
          v-if="inputType"
          :disabled="editFlag"
          size="mini"
          v-model="formData.sponsorName"
          placeholder="请输入关键字"
          style="width: 60%"
        ></el-input>
        <el-select
          v-else
          filterable
          :disabled="editFlag"
          v-model="formData.sponsorName"
          placeholder="请选择"
          clearable
          style="width: 60%"
          onchange="handleChange"
        >
          <el-option v-for="item in optionsList" :key="item.Name" :label="item.Name" :value="item.Name"> </el-option>
        </el-select>
          &nbsp;
        <el-button v-if="inputType" size="mini" type="primary" @click="handleGetOptions">查询</el-button>
        <el-button v-else size="mini" type="primary" @click="handleReset">重置</el-button>
        <p class="search-tips">为保证数据的搜索效率，每次查询只返回五条选择项，请您尽可能多输入一些关键字</p>
      </el-form-item>
      <el-form-item label="注册类项目：" prop="registerProject">
        <el-radio-group :disabled="editFlag" v-model="formData.registerProject">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="伦理号：">
        <el-input :disabled="editFlag" style="width: 60%" placeholder="请输入" v-model="formData.ethicsCode"></el-input>
      </el-form-item>
      <el-form-item label="注册号：">
        <el-input :disabled="editFlag" style="width: 60%" placeholder="请输入" v-model="formData.registerCode"></el-input>
      </el-form-item>
      <el-form-item label="主要研究者：">
        <el-input :disabled="editFlag" style="width: 60%" placeholder="请输入" v-model="formData.studyStaff"></el-input>
      </el-form-item>
      <el-form-item label="联系方式：">
        <el-input :disabled="editFlag" style="width: 60%" placeholder="请输入" v-model="formData.contactWay"></el-input>
      </el-form-item>
    </el-form>
    <el-row style="text-align: center; margin-top: 16px;">
      <el-button v-if="editFlag" type="primary" size="mini" @click="handleEdit">编辑</el-button>
      <div v-else>
        <el-button type="primary" size="mini" @click="handleSave">保存</el-button>
        <el-button type="default" size="mini" @click="handleCancel">取消</el-button>
      </div>
    </el-row>
  </div>
</template>
<script>

import { mapActions } from 'vuex'

export default {
  name: 'subject-params',

  data() {
    return {
      projectInfo: {},
      formData: {},
      rules: {
        projectCode: [{ required: true, message: '请输入', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入', trigger: 'blur' }],
        registerProject: [{ required: true, message: '请选择', trigger: 'blur' }],
        sponsorType: [{ required: true, message: '请选择', trigger: 'blur' }],
        sponsorName: [{ required: true, message: '请选择', trigger: 'blur' }],
      },
      editFlag: true,
      inputType: true,
      hospitalName: '',
      optionsList: []
    }
  },
  mounted() {
    this.projectId = localStorage.getItem('sys-project-id') || ''
    this.getProjectDetailsInfo()
  },

  methods: {
    ...mapActions('projectList', ['qryProjectDetailsInfo', 'qryProviderNameByName', 'editProjectInfo']),

    // 查询功能参数详情
    getProjectDetailsInfo() {
      const params = {
        id: this.projectId
      }
      this.qryProjectDetailsInfo({ params }).then((res) => {
        const { data, code, message } = res
        if (code === 200) {
          this.formData = data
          if (this.formData.sponsorType === 1) {
            this.hospitalName = this.formData.sponsorName
          }
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    // 编辑
    handleEdit() {
      this.editFlag = false
    },

    // 取消
    handleCancel() {
      this.editFlag = true
      this.getProjectDetailsInfo()
    },

    // 保存
    handleSave() {
      this.$refs.formRef.validate((valid) => {
        const data = {
          ...this.formData,
        }
        this.editProjectInfo({ data }).then(res => {
          const { code } = res
          if (code === 200) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.editFlag = true
            this.getProjectDetailsInfo()
          }
        })
      })

    },

    handleHospitalChange(data) {
      console.log('data', data)
      if (this.hospitalName !== data.value) {
        this.hospitalName = data.value
        this.formData.sponsor = data.value
        this.formData.sponsorName = data.label
      }
    },

    // 重置
    handleReset() {
      this.inputType = true
      this.formData.sponsorName = ''
      this.formData.sponsor = ''
    },

    handleGetOptions(query) {
      if (!this.formData.sponsorName) {
        this.$message.error('请输入关键字查询~')
        return
      }
      this.inputType = false
      const data = {
        searchName: this.formData.sponsorName,
      }
      this.qryProviderNameByName({ data }).then(res => {
        const { code, data = [] } = res
        if (code === 200) {
          const result = JSON.parse(data)
          this.optionsList = result.Result.Data || []
        }
      })
    },

  },
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
